<template>
  <div class="login_wrap">
    <n-card class="login_form_card">
      <img class="card_right_bg" src="@/assets/images/login/卡片右边背景.png" alt="" />
      <img class="card_right_top_y" src="@/assets/images/login/卡片右上圆形.png" alt="" />
      <img class="card_bottom_y" src="@/assets/images/login/卡片正下圆形.png" alt="" />
      <img class="card_ch" src="@/assets/images/login/登录插画.png" alt="" />
      <div class="ics_box">
        <div class="top_box">
          <img
            class="logo_img"
            src="https://wangweilun-1306462865.cos.ap-nanjing.myqcloud.com/images/logo.png"
          />
          <span class="topics">欢迎登录Buka-Admin</span>
        </div>
        <span class="subtopics">任你使用，就是不卡！</span>
      </div>
      <div class="login_form_box">
        <span class="topics">登录</span>
        <div class="login_form">
          <n-form ref="formRef" :model="model" :rules="rules">
            <n-form-item path="age" label="账号">
              <n-input
                v-model:value="loginInfo.name"
                autofocus
                placeholder="admin"
                :maxlength="20"
              />
            </n-form-item>
            <n-form-item path="password" label="密码">
              <n-input
                v-model:value="loginInfo.password"
                type="password"
                show-password-on="mousedown"
                placeholder="123456"
                :maxlength="20"
                @keypress.enter="handleLogin"
              />
            </n-form-item>
          </n-form>
          <n-checkbox
            :checked="isRemember"
            label="记住我"
            :on-update:checked="(val) => (isRemember = val)"
          />
          <br />
          <n-button :loading="loading" type="primary" @click="handleLogin">登录</n-button>
        </div>
      </div>
    </n-card>
  </div>
</template>

<script setup>
import { lStorage, setToken } from '@/utils'
import { useStorage } from '@vueuse/core'
import bgImg from '@/assets/images/login_bg.webp'
import api from './api'
import { addDynamicRoutes } from '@/router'

const title = import.meta.env.VITE_TITLE

const router = useRouter()
const { query } = useRoute()

const loginInfo = ref({
  name: '',
  password: '',
})

initLoginInfo()

function initLoginInfo() {
  const localLoginInfo = lStorage.get('loginInfo')
  if (localLoginInfo) {
    loginInfo.value.name = localLoginInfo.name || ''
    loginInfo.value.password = localLoginInfo.password || ''
  }
}

const isRemember = useStorage('isRemember', false)
const loading = ref(false)
async function handleLogin() {
  const { name, password } = loginInfo.value
  if (!name || !password) {
    $message.warning('请输入用户名和密码')
    return
  }
  try {
    loading.value = true
    $message.loading('正在验证...')
    const res = await api.login({ name, password: password.toString() })
    $message.success('登录成功')
    setToken(res.data.token)
    if (isRemember.value) {
      lStorage.set('loginInfo', { name, password })
    } else {
      lStorage.remove('loginInfo')
    }
    await addDynamicRoutes()
    if (query.redirect) {
      const path = query.redirect
      Reflect.deleteProperty(query, 'redirect')
      router.push({ path, query })
    } else {
      router.push('/')
    }
  } catch (error) {
    console.error(error)
    $message.removeMessage()
  }
  loading.value = false
}
</script>

<style lang="scss" scope>
.login_wrap {
  width: 100%;
  height: 100%;
  background: linear-gradient(124.3deg, rgba(67, 102, 212, 0.9) 0%, rgba(67, 102, 212, 0.3) 100%);
  position: relative;

  .login_form_card {
    width: 1644px;
    height: 847px;
    border-radius: 30px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    overflow: hidden;
    border: none;

    .n-card__content {
      padding: 0 !important;
    }

    .card_right_bg {
      position: absolute;
      right: -50px;
      top: -5px;
    }

    .card_right_top_y {
      position: absolute;
      right: 0;
      top: 0;
      transform: translate(40%, -40%);
    }

    .card_bottom_y {
      position: absolute;
      bottom: 0;
      right: 8%;
      transform: translate(0, 66%);
    }

    .card_ch {
      position: absolute;
      top: 50%;
      right: 50%;
      transform: translate(92%, -50%);
    }

    .ics_box {
      display: flex;
      flex-direction: column;
      position: absolute;
      top: 8%;
      left: 7%;

      .top_box {
        margin-bottom: 12px;
        .logo_img {
          width: 48px;
          height: 48px;
        }
        .topics {
          font-size: 34px;
          font-weight: 500;
          letter-spacing: 2px;
          line-height: 52.13px;
          color: rgba(67, 102, 212, 1);
          text-align: left;
          vertical-align: top;
        }
      }

      .subtopics {
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 1px;
        line-height: 23.17px;
        color: rgba(67, 102, 212, 0.8);
        text-align: left;
        vertical-align: top;
      }
    }

    .login_form_box {
      position: absolute;
      top: 36%;
      left: 7%;

      .topics {
        font-size: 24px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 34.75px;
        color: rgba(26, 26, 26, 1);
        text-align: left;
        vertical-align: top;
      }

      .login_form {
        margin-top: 40px;

        .n-form-item-label__text {
          font-size: 14px;
          font-weight: 400;
          letter-spacing: 2px;
          line-height: 17.38px;
          color: #a3a3a3;
          text-align: left;
          vertical-align: top;
        }

        .n-input {
          width: 250px;
          border: none !important;
        }

        .form_remember {
          padding: 0;
        }

        .n-button {
          margin-top: 40px;
          width: 155px;
          height: 40px;
          opacity: 1;
          border-radius: 10px;

          .n-button__content {
            font-size: 16px;
            font-weight: 500;
            letter-spacing: 2px;
            line-height: 26.06px;
            color: rgba(255, 255, 255, 1);
            text-align: left;
            vertical-align: top;
          }
        }
      }
    }
  }
}
</style>
